<template>
  <div>
    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
      <div class="widget am-cf">
        <div class="widget-head am-cf">
          <div class="widget-title am-fl">班级明细</div>
        </div>
        <div class="widget-body  am-fr">
          <multiple-toolbar ref="toolbar"  class="toolbar" @search="handleFind" teacherNamePlaceholder="主讲教师"
                            areaTeam busTeam grade subject allperiod teacherName className classNo needAllPeriod
          ></multiple-toolbar>
          <div class="am-u-sm-12 am-form-group">
            <el-button size="small" type="success" @click="handleExport">
              <span class="am-icon-download"></span>&nbsp;&nbsp;导出</el-button>
          </div>
          <div class="am-u-sm-12">
            <el-table
              :data="tableData"
              border
              maxHeight="600"
              empty-text="暂无数据"
              stripe
              style="min-width: 100%">
              <el-table-column
                prop="areaTeamName"
                min-width="120"
                label="区域">
              </el-table-column>
              <el-table-column
                prop="busTeamName"
                min-width="120"
                label="业务组">
              </el-table-column>
              <el-table-column
                prop="classNo"
                min-width="120"
                label="班级编号">
              </el-table-column>
              <el-table-column
                prop="className"
                min-width="120"
                label="班级名称">
              </el-table-column>
              <el-table-column
                prop="periodName"
                min-width="120"
                label="期数">
              </el-table-column>
              <el-table-column
                prop="segmentNo"
                min-width="120"
                label="段次">
              </el-table-column>
              <el-table-column
                prop="gradeName"
                min-width="120"
                label="年级">
              </el-table-column>
              <el-table-column
                prop="subjectName"
                min-width="120"
                label="科目">
              </el-table-column>
              <el-table-column
                prop="level"
                min-width="120"
                label="班型">
                <template scope="scope">
                  <div>
                    {{scope.row.level | getRegLevelVal}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="campusName"
                min-width="120"
                label="校区">
              </el-table-column>
              <el-table-column
                prop="teacherName"
                min-width="120"
                label="主讲教师">
              </el-table-column>
              <el-table-column
                prop="jobNature"
                min-width="120"
                label="任教性质">
                <template scope="scope">
                  <div>
                    {{scope.row.jobNature | getJobNature}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="seniorName"
                min-width="120"
                label="班主任">
              </el-table-column>
              <el-table-column
                prop="startCourseTime"
                min-width="120"
                label="开课日期">
                <template scope="scope">
                  <div>
                    {{scope.row.startCourseTime | formatDate}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="studyingTime"
                min-width="120"
                label="上课时间">
              </el-table-column>
              <el-table-column
                prop="endCourseTime"
                min-width="120"
                label="结课日期">
                <template scope="scope">
                  <div>
                    {{scope.row.endCourseTime | formatDate}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="studyingFee"
                min-width="120"
                label="学费">
              </el-table-column>
              <el-table-column
                prop="regAmount"
                min-width="120"
                label="已报人数">
              </el-table-column>
              <el-table-column
                prop="newStudentNum"
                min-width="120"
                label="新生人数">
              </el-table-column>
              <el-table-column
                prop="oldStudentNum"
                min-width="120"
                label="老生人数">
              </el-table-column>
              <el-table-column
                prop="seqOrStepStudentNum"
                min-width="120"
                label="续读生人数">
              </el-table-column>
              <el-table-column
                prop="totalAmount"
                min-width="120"
                label="已缴金额">
              </el-table-column>
              <el-table-column
                prop="newStudentAmount"
                min-width="120"
                label="新生金额">
              </el-table-column>
              <el-table-column
                prop="oldStudentAmount"
                min-width="120"
                label="老生金额">
              </el-table-column>
              <el-table-column
                prop="seqOrStepStudentAmount"
                min-width="120"
                label="续读生金额">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="am-u-lg-12 am-cf">
          <div class="am-fr">
            <pagination :isShowTotal="false" v-bind:total="total" v-bind:pageNo="pageNo" v-bind:pageSize="pageSize"
                        @paging="loadTableData"/>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
  import io from '../../lib/io'
  import MultipleToolbar from './MultipleToolbar.vue'
  import Pagination from '../base/Pagination.vue'
  import moment from 'moment'

  export default{
    data:function(){
      return {
        total: 0,
        pageSize: 10,
        pageNo: 1,
        tableData: [],
      }
    },
    components: {
      MultipleToolbar, Pagination
    },
    watch: {

    },
    computed: {

    },
    mounted :function(){
      $(window).smoothScroll()
//      this.loadTableData()
    },
    methods:{
      handleFind() {
        this.loadTableData(1)
      },
      handleExport() {
        var _this = this

        io.downloadFile(io.exportClassRegDetail, this.formatData(), function (ret) {
          if (ret.success) {
          } else {
            _this.$alert(ret.desc)
          }
        })
      },
      loadTableData: function (pageNo) {
        var _this = this
        _this.pageNo = pageNo || _this.pageNo || 1

        this.$showLoading()
        io.post(io.findClassRegDetailPage, Object.assign({}, {
          pageNo: _this.pageNo,
          pageSize: _this.pageSize
        }, this.formatData()), function (ret) {
          _this.$hiddenLoading()
          if (ret.success) {
            _this.total = ret.data.total
            _this.tableData = ret.data.list
          } else {
            _this.$alert(ret.desc)
          }
        })
      },
      formatData() {
        let toolbar = this.$refs.toolbar
        let busTeamIds = [],periodIds = [],gradeIds = []

        if(toolbar.formData.busTeamIds.length === 0) {
          toolbar.busTeams.map(val => {
            busTeamIds.push(val.busTeamId)
          })
        } else {
          busTeamIds = toolbar.formData.busTeamIds
        }
        if(toolbar.formData.periodIds.length === 0) {
          toolbar.periods.map(val => {
            periodIds.push(val.periodId)
          })
        } else {
          periodIds = toolbar.formData.periodIds
        }
        if(toolbar.formData.gradeIds.length === 0) {
          toolbar.grades.map(val => {
            if (val.value) {
              gradeIds.push(val.value)
            }
          })
        } else {
          gradeIds = toolbar.formData.gradeIds
        }
        return {
          areaTeamId: toolbar.formData.areaTeamId,
          subjectId: toolbar.formData.subjectId,
          teacherName: toolbar.formData.teacherName || '',
          className: toolbar.formData.className || '',
          busTeamIds: busTeamIds.join(','),
          periodIds: periodIds.join(','),
          gradeIds: gradeIds.join(','),
          classNo: toolbar.formData.classNo || '',
        }
      }
    }
  }
</script>
<style lang="less" scoped>
</style>
